<div ng-init="selected = { tab: 0 }"
     ng-model="modelArray" schema-validate="form"
     sf-field-model="sf-new-array"
     sf-new-array
     class="clearfix hz-tabarray schema-form-tabarray-{$form.tabType || 'left'$} {::$form.htmlClass$}">
  <div ng-if="!form.tabType || form.tabType !== 'right'"
       ng-class="{'col-xs-3': !form.tabType || form.tabType === 'left'}">
    <ul class="nav nav-pills nav-stacked"
        ng-class="{ 'tabs-left': !form.tabType || form.tabType === 'left'}">
      <li sf-field-model="ng-repeat"
          ng-repeat="item in $$value$$ track by $index"
          ng-click="$event.preventDefault() || (selected.tab = $index)"
          ng-class="{active: selected.tab === $index}">
        <a href="#">{$interp(form.title,{'$index':$index, value: item}) || $index$}</a>
      </li>
      <li ng-hide="form.readonly"
          ng-disabled="form.schema.maxItems <= modelArray.length"
          ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
        <a href="#">
          <span class="fa fa-plus"></span>
          <span class="hz-tabarray-add">{$:: form.add || 'Add'$}</span>
        </a>
      </li>
    </ul>
  </div>

  <div ng-class="{'col-xs-9': !form.tabType || form.tabType === 'left' || form.tabType === 'right'}">
    <div class="tab-content {$::form.fieldHtmlClass$}">
      <div class="tab-pane clearfix tab{$selected.tab$} index{$$index$}"
           sf-field-model="ng-repeat"
           ng-repeat="item in $$value$$ track by $index"
           ng-show="selected.tab === $index"
           ng-class="{active: selected.tab === $index}">

        <div schema-form-array-items></div>
         <button ng-hide="form.readonly"
                 ng-click="selected.tab = deleteFromArray($index).length - 1"
                 ng-disabled="form.schema.minItems >= modelArray.length"
                 type="button"
                 class="btn {$:: form.style.remove || 'btn-danger' $} pull-right">
           <span class="fa fa-trash"></span>
           <span class="hz-tabarray-remove">{$::form.remove || 'Remove'$}</span>
         </button>
      </div>
      <div class="help-block"
           ng-show="(hasError() && errorMessage(schemaError())) || form.description"
           ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description">
      </div>
    </div>
  </div>

  <div ng-if="form.tabType === 'right'" class="col-xs-3">
    <ul class="nav nav-pills tabs-right">
      <li  sf-field-model="ng-repeat"
          ng-repeat="item in $$value$$ track by $index"
          ng-click="$event.preventDefault() || (selected.tab = $index)"
          ng-class="{active: selected.tab === $index}">
          <a href="#">{$interp(form.title,{'$index':$index, value: item}) || $index$}</a>
      </li>
      <li ng-hide="form.readonly"
          ng-disabled="form.schema.maxItems <= modelArray.length"
          ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
        <a href="#">
          <span class="fa fa-plus"></span>
          <span class="hz-tabarray-add">{$::form.add || 'Add'$}</span>
        </a>
      </li>
    </ul>
  </div>
</div>
